<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Make Logo</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">

    <style>
    @font-face {
      font-family: Revamoped;
      src: url(./src/fonts/Revamped.otf);
    }
    </style>

    <!-- 白色背景 -->
    <rect width="64" height="64" fill="#333"/>
    
    <!-- 黑色文字 "sugar" -->
    <text
      x="50%"
      y="50%"
      dominant-baseline="middle"
      text-anchor="middle"
      font-family="Revamoped, sans-serif"
      font-size="14"
      fill="#fff">
      admin
    </text>
  </svg>

  <script>
    // 将 SVG 字符串转换为 PNG 图片并下载
    async function convertSvgToPng(svgString, fileName = 'sugar-logo.png') {
      // 1. 创建 SVG Blob 和 URL
      const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
      const svgUrl = URL.createObjectURL(svgBlob);

      // 2. 加载 SVG 到 Image 对象
      const img = new Image();
      img.crossOrigin = 'anonymous'; // 解决跨域问题
      img.src = svgUrl;

      await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
      });

      // 3. 创建 Canvas 并绘制
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      // 设置输出尺寸（可放大提高清晰度）
      const scale = 2; // 2倍缩放抗锯齿
      canvas.width = 64 * scale;  // 原SVG尺寸64x64
      canvas.height = 64 * scale;
      
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      // 4. 生成 PNG 并触发下载
      const pngUrl = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = fileName;
      link.href = pngUrl;
      link.click();

      // 清理内存
      URL.revokeObjectURL(svgUrl);
    }

    const svg = document.querySelector('svg')
    convertSvgToPng(svg.outerHTML).catch(console.error)
  </script>
</body>
</html>